<template>
	<view class="backstage">
		<view class="nav">当前为{{activity.phase}}期报名中，时间：{{activity.time}}</view>
		<!-- 入群 二维码 -->
		<view class="matching">
			<view class="header">
				<view class="le">匹配成功入群二维码</view>
				<view class="ri">
					<image @click="headlePrevious" src="../../static/image/le.png"></image>
					<view>{{activeIndex}}期</view>
					<image @click="headleNext" src="../../static/image/back_ri.png"></image>
				</view>
			</view>
			<view class="up_code">
				<scroll-view scroll-x="true" enable-flex="true" class="scorllx">
					<view style="display: flex;">
						<view class="up_img" v-for="(item,index) in photographList" :key="index">
							<image class="img" :src="item" @click="headlePrevie(item,photographList)"></image>
							<image class="delete_img" @click="headleRemove(index)" src="../../static/image/remove.png">
							</image>
						</view>
					</view>
				</scroll-view>
				<view class="btn">
					<view class="upload" @click="headleUpGroup">上传</view>
				</view>
			</view>
		</view>
		<!-- 		<view class="Tweet_box">
			<view>推文链接</view>
			<view class="link">
				<textarea type="text" v-model="Tweet" placeholder="请输入推文链接...." />
			</view>
			<view class="btn">
				<view class="upload" @click="headleLInk">上传推文链接</view>
			</view>

			<view class="ap">
				<view class="item" @click="copyBtn(1)">APPID：{{photograpboj.appid}}</view>
				<view class="item" @click="copyBtn(2)">PAGE：{{photograpboj.page}}</view>
			</view>
		</view> -->

		<!-- 助手 二维码 -->
		<view class="helper">
			<view class="title">报名完成添加助手二维码</view>
			<view class="up_con">
				<image :src="helperImg"></image>
				<view class="up_btn" @click="headleHelperImg">上传</view>
			</view>
		</view>
		<!-- 价格设置 -->
		<view class="price">
			<view class="title">价格设置</view>
			<view class="box">
				<view class="item">
					<view class="le">
						<view>第一档</view>
						<input disabled="true" class="disa" type="number" v-model="PriceList.first_price" />
						<view>元</view>
					</view>
					<view class="ri">不可修改
					</view>
				</view>
				<view class="item">
					<view class="le">
						<view>第二档</view>
						<input type="number" v-model="PriceList.second_price" />
						<view>元</view>
					</view>
					<view class="ri ri_actice" @click="headleModifyPrice">确定
					</view>
				</view>
				<view class="item">
					<view class="le">
						<view>第三档</view>
						<input type="number" v-model="PriceList.third_price" />
						<view>元</view>
					</view>
					<view class="ri ri_actice" @click="headleModifyPrice">确定
					</view>
				</view>
			</view>
		</view>

		<!-- 高级 立减金 -->
		<view class="advanced">
			<view class="title">
				<view>「高级匹配」立减金</view>
				<view class="ri">次日转化</view>
			</view>
			<view>
				<view class="item">
					<view class="le">
						<view>立减</view>
						<input type="number" v-model="PriceList.reduction_price" />
						<view>元，减后{{PriceList.after_reduction}}元</view>
					</view>
					<view class="ri ri_actice" @click="headleModifyPrice">确定
					</view>
				</view>
			</view>
		</view>
		<!-- 高级 体验价 -->
		<view class="advanced">
			<view class="title">
				<view>「高级匹配」体验价</view>
				<view class="ri">无付费用户-匹配失败转化</view>
			</view>
			<view>
				<view class="item">
					<view class="le">
						<view>体验价</view>
						<input type="number" v-model="PriceList.experience_price" />
						<view>元</view>
					</view>
					<view class="ri ri_actice" @click="headleModifyPrice">确定
					</view>
				</view>
			</view>
		</view>

		<!-- 报名数据 -->
		<view class="footer">
			<view class="title">
				<view class="le">报名数据</view>
				<view class="ri">总收益：{{totalPrice}}元</view>
			</view>
			<view class="content">
				<view class="item" v-for="(item,index) in applyList" :key="index">
					<view class="header">
						<view>{{item.phase}}期，报名人数：{{item.all_regis_num}}</view>
						<view>收益：{{item.all_profit}}元</view>
					</view>
					<view class="bom">
						<view>「高级匹配」付款人数：{{item.second_regis_num}}，共{{item.second_profit}}元</view>
						<view>「优先匹配」付款人数：{{item.third_regis_num}}，共{{item.third_profit}}元</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				applyList: [], //保存收益数据列表
				totalPrice: 0, //总收益
				pageNum: 1, //当前页码值
				nextPage: null, //判断是否有下一页
				photographList: [], //上传图片数组列表
				photograpboj: {},
				activeIndex: 0, //保存当前期数
				activity: {}, //当前状态信息
				PriceList: {}, //保存价格数据
				helperImg: '', //保存助手二维码		
				Tweet: '' //推文链接
			}
		},

		onLoad() {
			this.getActivity()
			this.getPriceList()
			this.getEarningsList()
		},

		onReachBottom() {
			if (this.nextPage !== null) {
				this.pageNum += 1
				this.getEarningsList()
			}
		},

		methods: {
			// 切换上一期
			headlePrevious() {
				if (this.activeIndex === 1) return
				this.activeIndex -= 1
				this.getGroupList()
			},

			// 切换下一期
			headleNext() {
				if (this.activeIndex === this.activity.phase) return
				this.activeIndex += 1
				this.getGroupList()
			},


			// 匹配成功入群二维码数据列表
			getGroupList() {
				let that = this
				that.$myRequesy({
					url: 'admin/group-qr',
					data: {
						p_no: that.activeIndex
					}
				}).then(res => {
					if (res.code === 0) {
						that.photographList = res.data.groupQrcode
						that.photograpboj = res.data
						that.Tweet = res.data.web_view
					}
				})
			},

			// headleLInk() {
			// 	let that = this
			// 	if (this.Tweet !== '') {
			// 		this.$myRequesy({
			// 			url: 'admin/update-group-qr',
			// 			method: "POST",
			// 			data: {
			// 				p_no: that.activeIndex,
			// 				web_view: that.Tweet
			// 			}
			// 		}).then(res => {

			// 		})
			// 	}

			// },

			//复制
			// // #ifdef H5
			// copyBtn(state) {
			// 	let result
			// 	let textarea = document.createElement("textarea")
			// 	textarea.value = state === 1 ? this.photograpboj.appid : this.photograpboj.page
			// 	textarea.readOnly = "readOnly"
			// 	document.body.appendChild(textarea)
			// 	textarea.select() // 选中文本内容
			// 	textarea.setSelectionRange(0, (state === 1 ? this.photograpboj.appid.length : this.photograpboj.page
			// 		.length)) // 设置选定区的开始和结束点
			// 	uni.showToast({ //提示
			// 		title: '已复制'
			// 	})
			// 	result = document.execCommand("copy") //将当前选中区复制到剪贴板
			// 	textarea.remove()
			// },
			// // #endif

			//获取当前期信息
			getActivity() {
				let that = this
				that.$myRequesy({
					url: 'admin/now-activity',
				}).then(res => {
					if (res.code === 0) {
						that.activity = res.data
						that.activeIndex = res.data.phase
						that.getGroupList()
					}
				})
			},

			//提交群二维码
			headleSubmit() {
				let that = this
				this.$myRequesy({
					url: 'admin/update-group-qr',
					method: "POST",
					data: {
						p_no: that.activeIndex,
						img_list: that.photographList,
						web_view: that.Tweet
					}
				}).then(res => {

				})
			},




			// 匹配成功上传群二维码
			headleUpGroup() {
				let that = this
				uni.chooseImage({
					success(res) {
						let tempFilePaths = res.tempFilePaths
						uni.showLoading({
								title: '上传中...',
								mask: true
							}),
							tempFilePaths.forEach((item, i) => {
								uni.uploadFile({
									url: getApp().globalData.linkUrl + 'admin/upload-img',
									filePath: item,
									name: 'imgFile',
									header: {
										'Authorization': uni.getStorageSync('token')
									},
									success(res) {
										let data = JSON.parse(res.data)
										if (data.code === 0) {
											that.photographList.push(data.data.imgUrl)
											that.headleSubmit()
											uni.hideLoading()
										} else {
											uni.showToast({
												title: '文件格式错误',
												icon: 'none'
											})
											uni.hideLoading()
										}
									},
									fail(err) {
										console.log(err)
									}
								})
							})
					}
				})
			},


			//移除上传的群二维码
			headleRemove(index) {
				this.photographList.splice(index, 1)
				this.headleSubmit()
			},


			//获取价格相关列表
			getPriceList() {
				this.$myRequesy({
					url: 'admin/price-info',
				}).then(res => {
					if (res.code === 0) {
						this.PriceList = res.data
						this.helperImg = res.data.help_qr
					}
				})
			},


			//修改价格
			headleModifyPrice() {
				let that = this
				that.$myRequesy({
					url: 'admin/update-price',
					method: "POST",
					data: {
						help_qr: that.helperImg,
						second_price: parseFloat(that.PriceList.second_price),
						third_price: parseFloat(that.PriceList.third_price),
						reduction_price: parseFloat(that.PriceList.reduction_price),
						experience_price: parseFloat(that.PriceList.experience_price),
					}
				}).then(res => {
					if (res.code === 0) {
						that.getPriceList()
					}
				})
			},


			// 上传助手二维码
			headleHelperImg() {
				let that = this
				uni.chooseImage({
					count: 1,
					success(res) {
						let tempFilePaths = res.tempFilePaths
						uni.showLoading({
								title: '上传中...',
								mask: true
							}),
							uni.uploadFile({
								url: getApp().globalData.linkUrl + 'admin/upload-img',
								filePath: tempFilePaths[0],
								name: 'imgFile',
								header: {
									'Authorization': uni.getStorageSync('token')
								},
								success(res) {
									let data = JSON.parse(res.data)
									if (data.code === 0) {
										that.helperImg = data.data.imgUrl
										uni.hideLoading()
										that.headleModifyPrice()
									} else {
										uni.showToast({
											title: '文件格式错误',
											icon: 'none'
										})
										uni.hideLoading()
									}
								},
								fail(err) {}
							})
					}
				})
			},

			// 报名记录 收益列表
			getEarningsList() {
				this.$myRequesy({
					url: 'admin/regis-info',
					data: {
						page: this.pageNum
					}
				}).then(res => {
					if (res.code === 0) {
						this.applyList = [...this.applyList, ...res.data]
						this.totalPrice = res.all_profit
						this.nextPage = res.next_url
					}
				})
			},


			headlePrevie(item, arr) {
				uni.previewImage({
					current: item,
					urls: arr
				})
			},
			// headlePrevie1(item) {
			// 	uni.previewImage({
			// 		current: item,
			// 		urls:[item]
			// 	})
			// }
		}
	}
</script>
<style>
	page {
		background-color: rgba(244, 245, 245, 100);
	}
</style>
<style lang="scss" scoped>
	.backstage {
		padding-bottom: 400upx;

		.nav {
			width: 100%;
			height: 100upx;
			background-color: rgba(247, 246, 254, 100);
			padding: 30upx;
			color: rgba(103, 85, 215, 100);
			font-size: 28upx;
		}

		.matching {
			height: 498upx;
			background-color: #fff;
			margin-bottom: 20upx;

			.header {
				display: flex;
				justify-content: space-between;
				padding: 40upx 40upx 32upx;
				border-bottom: 2upx solid rgba(244, 245, 245, 100);

				.le {
					color: rgba(0, 0, 0, 0.8);
					font-size: 30upx;
				}

				.ri {
					display: flex;
					align-items: center;
					color: rgba(0, 0, 0, 0.5);
					font-size: 15px;

					image {
						width: 42upx;
						height: 42upx;
					}
				}
			}

			.up_code {
				margin-bottom: 40upx;

				.scorllx {
					display: flex;
					justify-content: end;
					width: 90%;
					height: 200upx;
					margin: 20upx 0upx 40upx 40upx;
					white-space: nowrap;

					.up_img {
						margin-top: 10upx;
						width: 180upx;
						height: 180upx;
						margin-right: 20upx;
						position: relative;

						.img {
							width: 180upx;
							height: 180upx;
							border-radius: 12upx;
						}

						.delete_img {
							position: absolute;
							top: -14upx;
							right: -10upx;
							width: 44upx;
							height: 44upx;
							z-index: 99;
						}
					}



					.fb_tool {
						width: 200upx;
						height: 200upx;
						border-radius: 16upx;
						background-color: rgba(244, 245, 245, 100);
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 10upx;
					}

					.fb_tool image {
						width: 50upx;
						height: 50upx;
					}
				}

				.btn {
					display: flex;
					justify-content: space-around;

					.upload {
						width: 670upx;
						height: 84upx;
						line-height: 84upx;
						border-radius: 40upx;
						color: rgba(255, 255, 255, 100);
						font-size: 26upx;
						text-align: center;
						border: 2upx solid rgba(103, 85, 215, 100);
						background-color: rgba(103, 85, 215, 100);
					}
				}

			}



		}

		// .Tweet_box {
		// 	background-color: #fff;
		// 	margin-bottom: 20upx;
		// 	padding: 40upx;

		// 	.link {
		// 		width: 100%;
		// 		margin-top: 15upx;

		// 		textarea {
		// 			border-radius: 20upx;
		// 			width: 94%;
		// 			padding: 20upx;
		// 			background-color: #f4f5f5;
		// 			height: 200upx;
		// 		}
		// 	}

		// 	.btn {
		// 		display: flex;
		// 		justify-content: space-around;
		// 		margin-top: 20upx;

		// 		.upload {
		// 			width: 670upx;
		// 			height: 84upx;
		// 			line-height: 84upx;
		// 			border-radius: 40upx;
		// 			color: rgba(255, 255, 255, 100);
		// 			font-size: 26upx;
		// 			text-align: center;
		// 			border: 2upx solid rgba(103, 85, 215, 100);
		// 			background-color: rgba(103, 85, 215, 100);
		// 		}
		// 	}

		// 	.ap {
		// 		margin-top: 15upx;

		// 		.item {
		// 			margin: 20upx 0upx;
		// 			word-wrap: break-word;
		// 		}
		// 	}
		// }

		.helper {
			background-color: #fff;

			.up_con {
				padding: 40upx;
				margin-bottom: 20upx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 180upx;
					height: 180upx;
				}

				.up_btn {
					width: 140upx;
					height: 62upx;
					line-height: 62upx;
					border-radius: 40upx;
					background-color: rgba(103, 85, 215, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 26upx;
					text-align: center;
					font-family: Arial;
					border: 2upx solid rgba(103, 85, 215, 100);
				}
			}
		}

		.price {
			background-color: #fff;
			height: 448upx;
			margin-bottom: 20upx;

			.box {
				padding: 0upx 40upx;

				.item {
					display: flex;
					justify-content: space-between;
					margin: 40upx 0upx;

					.le {
						display: flex;
						align-items: center;

						input {
							width: 120upx;
							height: 58upx;
							border-radius: 10upx;
							background-color: rgba(244, 245, 245, 100);
							color: rgba(0, 0, 0, 0.8);
							font-size: 30upx;
							text-align: center;
							margin: 0upx 12upx 0upx 32upx;
						}

						.disa {
							color: rgba(0, 0, 0, 0.5);
						}
					}

					.ri {
						width: 140upx;
						height: 58upx;
						line-height: 56upx;
						color: rgba(103, 85, 215, 35);
						font-size: 26upx;
						text-align: center;
						border: 2upx solid rgba(103, 85, 215, 0.35);
						border-radius: 40upx;
						opacity: 0.7;
					}

					.ri_actice {
						background-color: rgba(103, 85, 215, 100);
						color: rgba(255, 255, 255, 100);
						opacity: 1;
					}
				}
			}
		}

		.advanced {
			background-color: #fff;
			height: 254upx;
			margin: 20upx 0upx;

			.item {
				display: flex;
				justify-content: space-between;
				margin: 40upx;


				.le {
					display: flex;
					align-items: center;

					input {
						width: 120upx;
						height: 58upx;
						border-radius: 10upx;
						background-color: rgba(244, 245, 245, 100);
						color: rgba(0, 0, 0, 0.8);
						font-size: 30upx;
						text-align: center;
						margin: 0upx 12upx 0upx 32upx;
					}
				}

				.ri {
					text-align: center;
					border: 2upx solid rgba(103, 85, 215, 0.35);
					border-radius: 40upx;
					font-size: 26upx;
					line-height: 58upx;
					width: 140upx;
					height: 58upx;
					background-color: rgba(103, 85, 215, 100);
					color: rgba(255, 255, 255, 100);
				}
			}
		}

		.title {
			display: flex;
			justify-content: space-between;
			padding: 40upx 40upx 30upx;
			border-bottom: 2upx solid rgba(244, 245, 245, 100);
			color: rgba(0, 0, 0, 0.8);
			font-size: 30upx;

			.ri {
				color: rgba(0, 0, 0, 0.5);
				font-size: 13px;
			}
		}


		.footer {
			.title {
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40upx 40upx 34upx;
				border-bottom: 2upx solid rgba(244, 245, 245, 100);

				.le {
					color: rgba(0, 0, 0, 0.8);
					font-size: 30upx;
				}

				.ri {
					color: rgba(255, 135, 48, 100);
					font-size: 26upx;
				}
			}

			.content {
				padding: 0upx 30upx;

				.item {
					margin-bottom: 30upx;
					padding: 40upx 30upx 30upx;
					background-color: #fff;
					width: 100%;
					height: 272upx;
					border-radius: 16upx;

					.header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: rgba(255, 135, 48, 100);
						font-size: 26upx;
						margin-bottom: 20upx;

						view:first-child {
							color: rgba(0, 0, 0, 0.8);
							font-size: 28upx;
						}
					}

					.bom {
						width: 100%;
						height: 142upx;
						border-radius: 6upx;
						background-color: rgba(249, 249, 249, 100);
						color: rgba(0, 0, 0, 0.5);
						font-size: 26upx;
						padding: 30upx;
						line-height: 45upx;
					}
				}
			}
		}
	}
</style>
